<template>
  <div style="margin-top: 50px">
    <!--    <template>
          <div style="text-align: center;margin-bottom: 30px">
            <el-alert
              title="应用注册"
              type="error"
              description="">
            </el-alert>
          </div>
        </template>-->
    <div class="form">
      <el-form ref="form" label-position="left" :model="form" label-width="120px" :rules="rule" style="margin: 0 auto">
        <el-form-item label="应用名称" prop="name" style="width: 600px">
          <el-input v-model="form.name" placeholder="英文名称"></el-input>
        </el-form-item>
        <el-form-item label="应用token" prop="token" style="width: 600px">
          <el-input v-model="form.token"></el-input>
        </el-form-item>
        <el-form-item label="mqAccessKey" prop="mqAccessKey" style="width: 600px">
          <el-input v-model="form.mqAccessKey"></el-input>
        </el-form-item>
        <el-form-item label="mqSecretKey" prop="mqSecretKey" style="width: 600px">
          <el-input v-model="form.mqSecretKey"></el-input>
        </el-form-item>
        <el-form-item label="mqConsumerId" prop="mqConsumerId" style="width: 600px">
          <el-input v-model="form.mqConsumerId"></el-input>
        </el-form-item>
        <el-form-item label="管理员" prop="empIds" style="width: 600px">
          <el-select v-model="form.empIds" multiple placeholder="请选择管理员" style="width: 100%" filterable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述信息" prop="description" style="width: 600px">
          <el-input
            type="textarea"
            autosize
            :autosize="{ minRows: 1, maxRows: 4}"
            placeholder="请输入描述信息"
            v-model="form.description">
          </el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">注册应用</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style scoped>
  .form {
    margin: 10px auto;
    width: 80%;
  }
</style>
<script>
  import {mapState} from 'vuex';
  import fetch from "../../store/uacc_api";
  export default {
    data() {
      return {
        options: [],
        rule: {
          name: [
            {required: true, message: '名称不能为空', trigger: 'blur'},
            {message: '名称只能是字母或者数字', pattern: (/^[0-9a-zA-Z]+$/), trigger: 'blur'},
          ],
          mqConsumerId: [
            {required: true, message: '请输入消费者id', trigger: 'blur'}
          ],
          descrition: [
            {required: true, message: '请输入应用描述', trigger: 'blur'},
          ],
          mqAccessKey: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ],
          mqSecretKey: [
            {required: true, message: '请输入秘钥', trigger: 'blur'},
          ],
          empIds: [
            {required: true, type: 'array', message: '请选择管理员', trigger: 'blur'},
          ],
          description: [
            {required: true, message: '请输入描述信息', trigger: 'blur'},
          ]
        },
        form: {
          name: '',
          descrition: '',
          token: '',
          description: '',
          mqAccessKey: '',
          mqSecretKey: '',
          mqConsumerId: '',
          empIds: []
        }
      }
    },
    computed: {
      ...mapState(['currentUser']),
    },
    created: function () {
      this.getAllUsers();
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let emps = '';
            if (this.form.empIds) {
              this.form.empIds.forEach(function (emp) {
                emps = emps + emp + ',';
              });
              emps = emps.substring(0, emps.length - 1);
            }
            let app = {
              appName: this.form.name,
              description: this.form.description,
              token: this.form.token,
              mqAccessKey: this.form.mqAccessKey,
              mqSecretKey: this.form.mqSecretKey,
              mqConsumerId: this.form.mqConsumerId,
              empIds: emps
            };
            let param = {'data': encodeURIComponent(JSON.stringify(app))};
            this.registerApp(param);
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getAllUsers(){
        //查询所有用户列表
        let me = this;
        fetch.getAllUser().then(function (res) {
          if (res.success) {
            let allUser = res.data;
            me.form.empIds.push(me.currentUser.empId);
            allUser.forEach((user) => {
              me.options.push({
                label: user.nickName,
                value: user.empId
              })
            });
          }
        });
      },
      registerApp(param){
        let me = this;
        fetch.registerApp(param).then(function (res) {
          if (res.success) {
            me.$message({
              showClose: true,
              type: 'success',
              message: '应用注册成功'
            });
            me.resetForm('form');
          } else {
            me.$message({
              showClose: true,
              message: res.errorMessage,
              type: 'error'
            });
          }
        })
      }
    }
  }
</script>
